<template>
	<div class="shopping bg-f5">
		<h3 class="bg-white align-right container pt10 pb10 c333 fs14" v-if="show_view" @click="show_view = false">编辑</h3>
		<h3 class="bg-white align-right container pt10 pb10 c333 fs14" v-else @click="show_view = true">完成</h3>
		<div class="shopping-content mt10 bg-white" v-if="data.list">
			<ul class="w92 auto" v-if="data.list.length">
				<li class="border-b layout pt15 pb15" v-for="(items,index) in data.list">
                    <van-checkbox v-model="items.checked" @change="clickOn(items,index)"></van-checkbox>
	                <img class="responsive-img mr10" :src="items.goods_img" alt="" style="width:5rem;height: 5rem">
					<div class="img-right flex_1">
						<p class="fs16 c333 bold ellipsis mb5" style="width:14rem">{{ items.goods_name }}</p>
						<span class="fs14 c666">{{ items.sku_name }}</span>
						<div class="layout mt15">
							<div style="width:8rem;">
								<strong class="fs18 subject mr15 bold"><i class="fs12 ">￥</i>{{ items.price }}</strong>
								<!-- <p><del class="fs24rem c999">原价：￥{{ items.promotion_price }}</del></p> -->
							</div>
							<van-stepper :disable-input='true' :step="items.min_num" :min="items.min_num" v-model="items.count" @change="quantityChange(items)"/>
						</div>
					</div>
				</li>
			</ul>
			<template v-else>
				<router-link to='/' class="align-center pt20">
					<img class="block auto pt30" src="../../assets/img14.png" alt="">
					<p class="pt20 pb40">您的购物车空空如也~去首页看看吧</p>
				</router-link>	
			</template>
			<div class="" v-if="show_view">
				<h3 class="bg-f5 align-center pt20 pb20">猜你喜欢</h3>
				<recommend-list></recommend-list>
			</div>
			<div class="shopping-close border-t layout bg-white pos-fix h50 lh50 full-width" style="bottom:50px;">
				<div class="flex_1 layout pl15 pr15">
					<div class="layout">
						<van-checkbox v-model="checked_all" @change='selectAll'></van-checkbox>
	                    <span class="fs16 c333 ml5">全选</span>
					</div>
					<span class="fs14 black bold">合计:<strong class="fs14 subject">￥</strong><i class="subject fs16">{{ total }}</i></span>
				</div>
				<button class="bg-red fs16 white bold" style="width:6.5rem" @click="pay" v-if="show_view">结算</button>
				<button class="bg-red fs16 white bold" style="width:6.5rem" @click="remove" v-else>删除</button>
			</div>
		</div>
	</div>
</template>

<script>
import Default from "@/components/Default";
import RecommendList from "@/components/Recommend-list";
import { Checkbox, CheckboxGroup, Stepper } from 'vant';
	export default{
		components:
        {
            Default,
            Checkbox,
            CheckboxGroup,
            Stepper,
            RecommendList
        },
		data()
		{
			return{

				quantity    : 1,
				checked     : false,
				checked_all : false,
				flag        : true,
				show_view   : true,
				img         : require('../../assets/icon-shopping.png'),
				data        : [],
				id_list     : [],
				delete_id   : [],
			}
		},
		computed:
		{
			total()
			{
				var total = 0;
				for(var i in this.data.list)
				{
					if(this.data.list[i].checked){
						total += this.data.list[i].count * this.data.list[i].price;
						
						this.id_list.push({
							goods_id : this.data.list[i].goods_id,
							sku_id   : this.data.list[i].sku_id,
							num      : this.data.list[i].count
						})
						this.delete_id.push(this.data.list[i].cart_id)
					}
				}
				return total;
			}
		},
		created()
		{
			this.loadData();
		},
		methods:
		{
			loadData()
			{
				this.$http.get('/cart/list').then( res => {
					this.data = res.data;
					if(res.data.list.length)
						this.quantity = res.data.list[0].count
				})
			},
			//结算页面
			pay()
			{
				this.$store.dispatch('getCardId',this.id_list);
				this.$router.push('/shopping/pay?type=shopping')
			},
			// 删除商品
			remove()
			{
				let params = {
					id : this.delete_id
				}
				this.$http.post('/cart/delete',params).then(res => {
					this.loadData();
				})
			},
			// 数量加减
			quantityChange(item)
			{
				let params = {
					id : item.cart_id,
					count : item.count
				}
				this.$http.post('/cart/change',params).then( res=> {})
			},
			// 商品
            clickOn(item,index)
            {
                this.isSelectALL();    
            },
            //全选反选
            selectAll()
            {
            	if(this.checked_all)
            	{
	            	for(var i in this.data.list)
	            	{
	            		this.data.list[i].checked = true;
	            	}
	            	this.$set(this.data.list, i, this.data.list[i])
            	}
            	else
            	{
            		for(var i in this.data.list)
	            	{
	            		this.data.list[i].checked = false;
	            	}
	            	this.$set(this.data.list, i, this.data.list[i])
            	}

            	this.isSelectALL();
            },
            // 判断全选
            isSelectALL()
            {
            	for(var i in this.data.list)
            	{
            		if(!this.data.list[i].checked)
            		{
            			this.checked_all = false;
            			return; 
            		}
            		else
            			this.checked_all = true;
            	}
            }
		}
	}
</script>

<style lang="less">
	.shopping{
		.shopping-content{
			ul{
				li{
					&:last-child{
						border: none;
					}
				}
			}
		}
	}
</style>